<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>课计划模块</title>
    <link rel="stylesheet" href="../../res/layui/css/layui.css" media="all">
    <script src="../../res/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../res/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="demoTable">
    <input type="hidden" id="one"/>
    <input type="hidden" id="two"/>
    <input type="hidden" id="three"/>
    <input type="hidden" id="four"/>
    <table class="layui-hide" id="test" lay-filter="test"></table>

    <script>


        var table2 = "";
        layui.use(['form', 'table', 'laydate'], function () {
            var form = layui.form;
            //获取table数据保存在变量中
            var table = layui.table;

            dateRender();


            //数据交互
            table2 = table.render({
                elem: '#test',
                url: '../../../atsPlanCurriculumController/selectAll',
                toolbar: '#headBtn',//开启头部工具栏，并为其绑定左侧模板1
                title: '课计划数据表',
              /*  done: function (res, curr, count) {
                    $("table").css("width", "100%");
                },*/
                cols: [[
                    //是否禁用拖拽列宽（默认false）unresize:true,是否禁用排序sort:true
                    {type:'checkbox',title:'全选', fixed: 'left'},
                    {type: 'numbers', title: '排序'},//序列号 numbers
                    {field: 'curriculumName', title: '计划名称', width: 120, toolbar: '#All'},
                    {field: 'itemName', title: '运动项目名称', width: 120},
                    {field: 'coachName', title: '教练员姓名', width: 120},
                    {field: 'otherCoach', title: '其他教练员', width: 120},
                    {field: 'planDate', title: '制定时间', width: 120},
                    {field: 'weekName', title: '周日计划名称', width: 120},
                    {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                ]],
                page: true
            });


            //监听头部工具栏事件
            table.on('toolbar(test)', function (obj) {

                var checkStatus = table.checkStatus(obj.config.id), data = checkStatus.data; //获取选中的数据
                switch (obj.event) {
                    case 'delAll':
                        layer.confirm('您真的要删除吗', function(index) {
                            var data = checkStatus.data;
                            var id = "";
                            $.each(data, function(index, item) {
                                id += item.curriculumId + ",";
                            });

                            if(id.length==0){
                                layer.msg("请选择需要操作的行");
                                return;
                            }
                            var url ="../../../atsPlanCurriculumController/delAll";
                            var datas = {
                                id : id
                            };
                            $.post(url, datas, function(obj) {
                                layer.msg(obj.msg);
                                window.location.reload();
                                dateRender();
                            }, "json");
                        });
                        break;
                    case 'seachTable'://搜索
                        $("#one").val($("#trainer").val());
                        $("#two").val($("#curriculumName").val());
                        $("#three").val($("#startTime").val());
                        $("#four").val($("#endTime").val());
                        //执行重载
                        table2.reload({
                            url: '../../../atsPlanCurriculumController/selectAll',
                            where: {
                                trainer: $("#trainer").val(),
                                curriculumName:$("#curriculumName").val(),
                                startTime:
                                    $("#startTime").val(),
                                endTime:
                                    $("#endTime").val()
                            },
                            //第一页开始
                            page: {
                                curr: 1
                            }
                        });
                        $("#trainer").val($("#one").val());
                        $("#curriculumName").val($("#two").val());
                        $("#startTime").val($("#three").val());
                        $("#endTime").val($("#four").val());
                        dateRender();
                        break;
                    case
                    'add'
                    ://新增
                        //iframe层
                        layer.open({
                            type: 2,
                            title: '新增页面',//标题
                            shadeClose: true,
                            shade: 0.3,//背景阴影
                            area: ['60%', '100%'],//大小
                            content: 'AtsPlanCurriculumAddorupdate.html?pid=1', //iframew的url
                            end: function () {
                                dateRender();
                            }
                        });
                        break;

                }
                ;

            });

            //监听操作
            table.on('tool(test)', function (objs) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                    var data = objs.data; //获得当前行数据
                    var layEvent = objs.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                    var tr = objs.tr; //获得当前行 tr 的DOM对象
                    if (layEvent === 'del') { //删除
                        layer.confirm('真的删除行么', function (index) {
                            var url = "../../../atsPlanCurriculumController/updateIsva";
                            var datas = {curriculumId: objs.data.curriculumId, isva: objs.data.isva}
                            $.post(url, datas, function (obj) {
                                if (obj.num == 1) {
                                    layer.msg(obj.msg);
                                    table2.reload();
                                    dateRender();
                                } else {
                                    layer.msg(obj.msg);
                                }
                            }, "json")
                        });
                    }
                    if (layEvent === 'details') {
                        //iframe层
                        layer.open({
                            type: 2,
                            title: '查看详情',//标题
                            shadeClose: true,
                            shade: 0.3,//背景阴影
                            area:['60%', '90%'],//大小
                            content: 'AtsPlanCurriculumDetails.html?curriculumId=' + data.curriculumId, //iframew的url
                            end: function () {

                                table2.reload();//刷新父页面;
                                dateRender();
                            }
                        });
                    }
                    if (layEvent === 'edit') {
                        //iframe层
                        layer.open({
                            type: 2,
                            title: '修改页面',//标题
                            shadeClose: true,
                            shade: 0.3,//背景阴影
                            area: ['60%', '100%'],//大小
                            content: 'AtsPlanCurriculumAddorupdate.html?curriculumId=' + data.curriculumId, //iframew的url
                            end: function () {
                                dateRender();
                            }
                        });
                    }
                }
            );
            function dateRender(){
                layui.use(['laydate'], function () {
                    laydate = layui.laydate;
                    //日期
                    laydate.render({
                        elem: '#startTime',
                        trigger: 'click',
                        type: 'date'
                    });

                    laydate.render({
                        elem: '#endTime',
                        trigger: 'click',
                        type: 'date'
                    });
                });
            }

        })
        ;
//<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="derive" id="derive">导出</button>
    </script>

</div>
</body>
<style>
    .details {
        color:#00aced;
        cursor: pointer;
        width: 100%;
        height: 100%;
    }
    .layui-inline {
        width: 12%;
    }
</style>
<script type="text/html" id="headBtn">
    教练员姓名:
    <div class="layui-inline">
        <input class="layui-input" name="trainer" id="trainer" placeholder="请输入关键字" autocomplete="off">
    </div>
    计划名称:
    <div class="layui-inline">
        <input class="layui-input" name="curriculumName" id="curriculumName" placeholder="请输入关键字" autocomplete="off">
    </div>
    时间:
    <div class="layui-inline">
        <input class="layui-input" name="startTime" id="startTime" placeholder="开始时间" lay-verify="date"
               autocomplete="off">
    </div>
    -
    <div class="layui-inline">
        <input class="layui-input" name="endTime" id="endTime" placeholder="结束时间" lay-verify="date" autocomplete="off">
    </div>


    <input type="button" lay-event="seachTable" class="layui-btn layui-btn-normal layui-btn-sm" value="搜索"/>
    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="add" id="add">增加</button>

    <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delAll">批量删除</button>

</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script type="text/html" id="All">
    <div lay-event="details" class="details">{{d.curriculumName}}</div>
</script>


</html>